<template>

  <div class="container" style="min-height: 100%; padding-bottom: 100px;">
    <el-container>
      <el-aside width="300px">
        <el-card class="box-card">

          <template #header>
            <el-avatar :size="250" :src="imgurl"></el-avatar>
            <div class="clearfix" style="display: flex; flex-direction: column" >
              <div style="font-family: 'Cascadia Code'; font-weight: bold; font-size: 30px">{{nickname}}</div>
              <div style="font-family: 'Cascadia Code' ; font-weight: lighter; font-size: 15px">{{user}}</div>
            </div>

            <el-button type="info" @click="onButtonClick" size="large" style="width: 100%; align-content: center">编辑信息</el-button>
          </template>
          <ul class="vcard-details">
            <li class="vcard-details" style="font-size: 18px;margin-right: 10px" >
              <el-icon style="font-size: 18px;margin-right: 10px"  ><Phone /></el-icon>
              <span class="p-label" style="font-size: 18px">{{phone}}</span>
            </li>

            <li class="vcard-details" style="font-size: 18px;margin-right: 10px">
              <el-icon style="font-size: 18px;margin-right: 10px"><Message /></el-icon>
              <a rel="nofollow me" class="Link--primary" style="font-size: 18px" >{{email}}</a>
            </li>
          </ul>
        </el-card>
      </el-aside>
      <el-container>
        <el-main>
          <div style="background: #ECECEC; padding: 30px">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-card>
                  <a-statistic
                      title="论文📖"
                      :value=paperNum
                      suffix="篇"
                      :value-style="{ color: '#3f8600' }"
                      style="margin-right: 50px"
                  >
                    <template #prefix>
                      <a-icon type="arrow-up" />
                    </template>
                  </a-statistic>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card>
                  <a-statistic
                      title="项目💻"
                      :value=projectNum
                      suffix="个"
                      class="demo-class"
                      :value-style="{ color: '#cf1322' }"
                  >
                    <template #prefix>
                      <a-icon type="arrow-down" />
                    </template>
                  </a-statistic>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script  setup lang="ts" name="dashboard">

import {ElMessage, genFileId, UploadInstance, UploadProps, UploadRawFile, ElTable} from "element-plus";
import axios, {Axios} from "axios";
import {useRoute, useRouter} from "vue-router";
import { inject } from "vue";
import { getCurrentInstance } from 'vue';
import {ref} from "vue";
let imgurl = localStorage.getItem('pic')
let nickname = localStorage.getItem('nickname')
let user = localStorage.getItem('ms_username')
let phone = localStorage.getItem('phone')
let email = localStorage.getItem('email')
console.log(phone);
let paperNum = ref(0);
let projectNum = ref(0);
const reload = inject("reload")
axios.get(`paper/list?pageSize=${1}&pageNum=${1}`,
    {
      headers: {
        'Content-Type': 'application/json',
        'session': localStorage.getItem('ID'),
      }
    }).then(res => {
  if (res.data.code === 0) {
    paperNum.value = res.data.data.total;
  } else {
    ElMessage('数据获取失败');
  }
})

axios.get(`project/list?pageSize=${1}&pageNum=${1}`,
    {
      headers: {
        'Content-Type': 'application/json',
        'session': localStorage.getItem('ID'),
      }
    }).then(res => {
  if (res.data.code === 0) {
    projectNum.value = res.data.data.total;
  } else {
    ElMessage('数据获取失败');
  }
})

let route = useRoute()
let router = useRouter()
const onButtonClick = () =>
{
  router.push('/user');
}


</script>

<style>
.item { margin-top: 10px; margin-right: 40px; }

.vcard-details {
  list-style: none;
}
.vcard-detail {
  padding-left: 24px;
  font-size: 14px;
}
.vcard-detail .octicon {
  float: left;
  width: 16px;
  margin-top: 4px;
  margin-left: -24px;
  color: #21262d;
  text-align: center;
}
a {
  color: #21262d;
  text-decoration: none;
}
li{
  margin-top: 3px;
}
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>